<template>
  <div class="container">
    <Breadcrumb :items="['充电管理', '退款列表']" />
    <a-card class="general-card" :title="$t('充电退款列表')">
      <!-- 搜索区域 -->
      <div class="search-area">
        <a-form
          :model="searchForm"
          label-align="left"
          :label-col-props="{ span: 6 }"
          :wrapper-col-props="{ span: 18 }"
          label-layout="inline"
        >
          <div class="search-form-wrapper">
            <div class="search-form-item">
              <p class="search-label">订单编号</p>
              <a-input
                v-model="searchForm.orderNumber"
                :placeholder="$t('请输入订单编号')"
                allow-clear
              />
            </div>
            <div class="search-form-item">
              <p class="search-label">用户手机号</p>
              <a-input
                v-model="searchForm.mobile"
                :placeholder="$t('请输入用户手机号')"
                allow-clear
              />
            </div>
            <div class="search-form-item">
              <p class="search-label">退款状态</p>
              <a-select
                v-model="searchForm.status"
                :placeholder="$t('退款状态')"
                allow-clear
                allow-search
              >
                <a-option
                  v-for="item in statusOptions"
                  :key="item.value"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-option>
              </a-select>
            </div>

            <div class="search-form-item search-form-item-large">
              <p class="search-label">退款时间</p>
              <a-range-picker
                v-model="timeRange"
                :placeholder="['开始时间', '结束时间']"
                style="width: 100%"
                allow-clear
              />
            </div>

            <div class="search-form-item">
              <p class="search-label">订单类型</p>
              <a-select
                v-model="searchForm.orderType"
                :placeholder="$t('请选择订单类型')"
              >
                <a-option
                  v-for="item in orderTypeOptions"
                  :key="item.value"
                  :value="item.value"
                >
                  {{ item.label }}
                </a-option>
              </a-select>
            </div>

            <div class="search-form-item search-form-item-button">
              <a-space>
                <a-button @click="reset">
                  <template #icon>
                    <icon-refresh />
                  </template>
                  {{ $t('重置') }}
                </a-button>
                <a-button type="primary" status="normal" @click="search">
                  <template #icon>
                    <icon-search />
                  </template>
                  {{ $t('搜索') }}
                </a-button>

                <a-button
                  :loading="loadingExportAll"
                  type="primary"
                  status="danger"
                  @click="exportAll"
                >
                  <template #icon>
                    <icon-download />
                  </template>
                  {{ $t('导出') }}
                </a-button>
              </a-space>
            </div>
          </div>
        </a-form>
      </div>

      <!-- 快速筛选条 -->
      <div class="quick-filter">
        <span class="filter-label">快速筛选：</span>
        <a-radio-group
          v-model="quickFilter"
          type="button"
          size="small"
          @change="handleQuickFilterChange"
        >
          <a-radio value="all">全部</a-radio>
          <a-radio value="today">今日退款</a-radio>
          <a-radio value="refunding">退款中</a-radio>
          <a-radio value="completed">已完成</a-radio>
        </a-radio-group>
      </div>

      <!-- 订单统计 -->
      <a-card class="statistics-card">
        <a-row :gutter="16">
          <a-col :span="12">
            <div class="statistic-item">
              <div class="statistic-title">退款总数</div>
              <div class="statistic-value">{{
                statistics.totalCount || 0
              }}</div>
              <div class="statistic-desc">单位：笔</div>
            </div>
          </a-col>
          <a-col :span="12">
            <div class="statistic-item">
              <div class="statistic-title">退款总金额</div>
              <div class="statistic-value">{{
                statistics.totalRefundAmount?.toFixed(2) || '0.00'
              }}</div>
              <div class="statistic-desc">单位：元</div>
            </div>
          </a-col>
        </a-row>
      </a-card>

      <a-table
        row-key="id"
        :loading="loading"
        :data="renderData"
        :pagination="pagination"
        :bordered="tableBordered"
        :size="tableSize"
        :scroll="{ x: '120%', y: tableScrollY }"
        :stripe="tableStriped"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
        <template #columns>
          <a-table-column title="序号" :width="40" fixed="left" align="center">
            <template #cell="{ rowIndex }">
              <span class="serial-number-column">
                {{
                  (pagination.current - 1) * pagination.pageSize + rowIndex + 1
                }}
              </span>
            </template>
          </a-table-column>
          <a-table-column
            title="订单编号"
            data-index="orderNumber"
            :width="160"
          >
            <template #cell="{ record }">
              <a-tooltip
                :content="`${record.orderNumber || '-'} `"
                background-color="#3491FA"
              >
                <a-button class="order-number-column order-link">{{
                  record.orderNumber || '-'
                }}</a-button>
              </a-tooltip>
            </template>
          </a-table-column>
          <a-table-column title="退款订单编号" data-index="sn" :width="160">
            <template #cell="{ record }">
              <a-tooltip
                :content="`${record.sn || '-'} `"
                background-color="#3491FA"
              >
                <a-button class="order-number-column order-link">{{
                  record.sn || '-'
                }}</a-button>
              </a-tooltip>
            </template>
          </a-table-column>
          <a-table-column
            title="用户手机号"
            alain="center"
            data-index="mobile"
            :width="120"
          >
            <template #cell="{ record }">
              {{ record.mobile || '-' }}
            </template>
          </a-table-column>
          <a-table-column title="会员ID" data-index="memberId" :width="120" />
          <a-table-column
            title="实退金额(元)"
            data-index="actualMoney"
            :width="120"
            align="right"
          >
            <template #cell="{ record }">
              {{ record.actualMoney?.toFixed(2) || '-' }}
            </template>
          </a-table-column>
          <a-table-column
            title="退款金额(元)"
            data-index="money"
            :width="120"
            align="right"
          >
            <template #cell="{ record }">
              {{ record.money?.toFixed(2) || '-' }}
            </template>
          </a-table-column>
          <a-table-column
            title="操作人员手机号"
            data-index="opMobile"
            :width="120"
          />
          <a-table-column title="订单状态" data-index="status" :width="90">
            <template #cell="{ record }">
              <a-tag :color="getRefundOrderStatusColor(record.status)">
                {{ getRefundOrderStatusText(record.status) }}
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column title="订单类型" data-index="orderType" :width="90">
            <template #cell="{ record }">
              {{ getOrderTypeText(record.orderType) }}
            </template>
          </a-table-column>
          <a-table-column title="退款时间" data-index="refundDate" :width="160">
            <template #cell="{ record }">
              {{ record.refundDate ? formatDateTime(record.refundDate) : '-' }}
            </template>
          </a-table-column>
        </template>
        <template #title>
          <div class="table-toolbar">
            <a-space>
              <a-button size="small" @click="exportAll">
                <template #icon>
                  <icon-export />
                </template>
                导出全部
              </a-button>
              <a-button size="small" @click="refreshTable">
                <template #icon>
                  <icon-refresh />
                </template>
                刷新
              </a-button>
            </a-space>
            <a-space style="margin-left: auto">
              <a-switch v-model="tableBordered" type="round" size="small">
                <template #checked>边框</template>
                <template #unchecked>无边框</template>
              </a-switch>
              <a-switch v-model="tableStriped" type="round" size="small">
                <template #checked>斑马纹</template>
                <template #unchecked>无斑马纹</template>
              </a-switch>
              <a-radio-group v-model="tableSize" type="button" size="small">
                <a-radio value="mini">紧凑</a-radio>
                <a-radio value="small">常规</a-radio>
                <a-radio value="medium">宽松</a-radio>
              </a-radio-group>
              <a-dropdown>
                <a-button size="small">
                  每页显示
                  <icon-down />
                </a-button>
                <template #content>
                  <a-doption @click="changePageSize(10)">10条/页</a-doption>
                  <a-doption @click="changePageSize(20)">20条/页</a-doption>
                  <a-doption @click="changePageSize(30)">30条/页</a-doption>
                  <a-doption @click="changePageSize(50)">50条/页</a-doption>
                  <a-doption @click="changePageSize(100)">100条/页</a-doption>
                </template>
              </a-dropdown>
            </a-space>
          </div>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import {
    ref,
    reactive,
    computed,
    onMounted,
    onBeforeUnmount,
    nextTick,
    h,
  } from 'vue';
  import { Message, Modal } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import request from '@/utils/request';
  import { useRoute } from 'vue-router';
  import {
    IconFile,
    IconSearch,
    IconRefresh,
    IconDown,
    IconExport,
    IconEye,
    IconPoweroff,
  } from '@arco-design/web-vue/es/icon';
  import {
    getRefundOrderStatistics,
    stopCharging,
    refundOrder,
    OrderRefundQueryParams,
    RefundOrder,
    getRefundOrderList,
    PayOrderRefundStatistics,
    PayOrderRefundstatusEnums,
    PaymentStatusEnum,
    PaymentMethodEnum,
    StopReasonEnum,
  } from '@/api/refund';
  import dayjs from 'dayjs';

  // 格式化金额
  const formatAmount = (amount: number | undefined): string => {
    if (amount === undefined || amount === null) return '0.00';
    return amount.toFixed(2);
  };

  // 获取路由参数
  const route = useRoute();
  const routeStationId = ref<number | undefined>(undefined);
  const routeStationName = ref<string | undefined>(undefined);
  const routePileId = ref<number | undefined>(undefined);
  const routePileName = ref<string | undefined>(undefined);

  const { loading, setLoading } = useLoading();
  const renderData = ref<RefundOrder[]>([]);
  const detailVisible = ref(false);
  const detailInfo = ref<any>({});
  const timeRange = ref();
  const statistics = ref<PayOrderRefundStatistics>({
    totalCount: 0,
    totalRefundAmount: 0,
  });
  const tableSize = ref<'mini' | 'small' | 'medium'>('small');
  const tableBordered = ref(false);
  const tableStriped = ref(true);
  const tableScrollY = ref(500);
  const quickFilter = ref('all');
  const statusOptions = [
    { label: '退款中', value: PayOrderRefundstatusEnums.REFUNDING },
    { label: '待退款', value: PayOrderRefundstatusEnums.WAITING },
    { label: '已退款', value: PayOrderRefundstatusEnums.SUCCESS },
    { label: '退款失败', value: PayOrderRefundstatusEnums.FAILED },
  ];
  const orderTypeOptions = [
    { label: '充电退款', value: 1 },
    { label: '订单退款', value: 2 },
  ];
  const searchForm = reactive({
    orderNumber: '',
    mobile: '',
    status: undefined as number | undefined,
    refundStartDate: '',
    refundEndDate: '',
    orderType: undefined as number | undefined,
  });
  const pagination = reactive({
    total: 0,
    current: 1,
    pageSize: 50, // 默认每页显示50条
    showTotal: true,
    showPageSize: true,
    pageSizeOptions: [10, 20, 30, 50, 100],
  });

  // 计算表格滚动高度
  function calculateTableHeight() {
    nextTick(() => {
      const windowHeight = window.innerHeight;
      const tableContainer = document.querySelector('.container');
      if (tableContainer) {
        const tableTop = tableContainer.getBoundingClientRect().top;
        // 底部预留 120px 空间给分页器
        tableScrollY.value = windowHeight - tableTop - 180;
      }
    });
  }
  // 构建查询参数
  function buildParams() {
    const params: Record<string, any> = {
      ...searchForm,
    };

    // 处理时间范围
    if (timeRange.value && timeRange.value.length === 2) {
      params.refundStartDate = dayjs(timeRange.value[0]).format(
        'YYYY-MM-DD HH:mm:ss'
      );
      params.refundEndDate = dayjs(timeRange.value[1]).format(
        'YYYY-MM-DD HH:mm:ss'
      );
    }

    return params;
  }
  // 查询数据
  async function fetchData() {
    setLoading(true);
    try {
      // 获取列表数据
      const res = await getRefundOrderList({
        pageNum: pagination.current,
        pageSize: pagination.pageSize,
        ...buildParams(),
      });

      console.log('退款列表', res);

      // 响应拦截器已经处理响应，返回的res就是我们需要的数据
      renderData.value = res.data.records || [];
      pagination.total = res.data.total || 0;

      // 获取统计数据
      await fetchStatistics();
    } catch (error) {
      console.error('获取数据失败', error);
      Message.error('获取数据失败');
    } finally {
      setLoading(false);
    }
  }

  // 获取统计数据
  async function fetchStatistics() {
    try {
      const res = await getRefundOrderStatistics(buildParams());
      // 响应拦截器已经处理响应，直接使用res.data
      statistics.value = {
        totalCount: res.data.totalCount || 0,
        totalRefundAmount: res.data.totalRefundAmount || 0,
      };
    } catch (error) {
      console.error('获取统计数据失败', error);
    }
  }
  // 处理快速筛选
  function handleQuickFilterChange() {
    // 重置搜索表单
    searchForm.orderNumber = '';
    searchForm.mobile = '';
    searchForm.payOrderRefundstatusEnums = undefined;

    // 根据快速筛选值设置相应的查询条件
    switch (quickFilter.value) {
      case 'today':
        const today = dayjs().format('YYYY-MM-DD');
        timeRange.value = [
          dayjs(`${today} 00:00:00`).toDate(),
          dayjs(`${today} 23:59:59`).toDate(),
        ];
        break;
      case 'refunding':
        timeRange.value = null;
        searchForm.status = PayOrderRefundstatusEnums.REFUNDING;
        break;
      case 'completed':
        timeRange.value = null;
        searchForm.status = PayOrderRefundstatusEnums.SUCCESS;
        break;
      default: // 'all'
        timeRange.value = null;
        searchForm.status = undefined;
    }

    // 重置分页并搜索
    pagination.current = 1;
    fetchData();
  }

  // 刷新表格数据
  function refreshTable() {
    fetchData();
    Message.success('数据已刷新');
  }

  // 获取订单状态文本
  function getRefundOrderStatusText(status: number | undefined) {
    switch (status) {
      case PayOrderRefundstatusEnums.WAITING:
        return '待退款';
      case PayOrderRefundstatusEnums.REFUNDING:
        return '退款中';
      case PayOrderRefundstatusEnums.FAILED:
        return '退款失败';
      case PayOrderRefundstatusEnums.SUCCESS:
        return '退款完成';
      default:
        return '未知状态';
    }
  }


  // 获取订单类型文本
  function getOrderTypeText(orderType: number | undefined) {
    switch (orderType) {
      case 1:
        return '充电退款';
      case 2:
        return '订单退款';
      default:
        return '未知状态';
    }
  }

  
  function getIsDivideText(isDivide: number | undefined) {
    switch (isDivide) {
      case 1:
        return '是';
      case 0:
        return '否';
      default:
        return '未知状态';
    }
  }

  // 获取订单状态颜色
  function getRefundOrderStatusColor(status: number | undefined) {
    switch (status) {
      case PayOrderRefundstatusEnums.WAITING:
        return 'orange';
      case PayOrderRefundstatusEnums.REFUNDING:
        return 'blue';
      case PayOrderRefundstatusEnums.SUCCESS:
        return 'green';
      case PayOrderRefundstatusEnums.FAILED:
        return 'red';
      default:
        return 'gray';
    }
  }

  // 获取支付状态文本
  function getPaymentStatusText(status: number | undefined) {
    switch (status) {
      case PaymentStatusEnum.UNPAID:
        return '未支付';
      case PaymentStatusEnum.PAID:
        return '已支付';
      case PaymentStatusEnum.REFUNDED:
        return '已退款';
      case PaymentStatusEnum.PARTIAL_REFUNDED:
        return '部分退款';
      default:
        return '未知状态';
    }
  }

  // 获取支付状态颜色
  function getPaymentStatusColor(status: number | undefined) {
    switch (status) {
      case PaymentStatusEnum.UNPAID:
        return 'orange';
      case PaymentStatusEnum.PAID:
        return 'green';
      case PaymentStatusEnum.REFUNDED:
        return 'purple';
      case PaymentStatusEnum.PARTIAL_REFUNDED:
        return 'magenta';
      default:
        return 'gray';
    }
  }

  // 获取支付方式文本
  function getPaymentMethodText(method?: number): string {
    if (method === undefined) return '-';
    const map: Record<number, string> = {
      [PaymentMethodEnum.WECHAT]: '微信',
      [PaymentMethodEnum.ALIPAY]: '支付宝',
      [PaymentMethodEnum.UNIONPAY]: '银联',
      [PaymentMethodEnum.BALANCE]: '余额',
    };
    return map[method] || '未知';
  }

  // 获取停止原因文本
  function getStopReasonText(reason?: number): string {
    if (reason === undefined) return '-';
    const map: Record<number, string> = {
      [StopReasonEnum.NORMAL]: '正常充满',
      [StopReasonEnum.MANUAL]: '用户手动停止',
      [StopReasonEnum.SYSTEM_ERROR]: '系统故障',
      [StopReasonEnum.TIMEOUT]: '超时停止',
      [StopReasonEnum.INSUFFICIENT_BALANCE]: '余额不足',
    };
    return map[reason] || '未知';
  }

  // 格式化日期时间
  function formatDateTime(dateTime: string | null | undefined): string {
    if (!dateTime) return '-';
    return dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss');
  }

  // 查看详情

  // 关闭详情对话框

  // 搜索
  function search() {
    pagination.current = 1;
    fetchData();
  }

  // 重置
  function reset() {
    searchForm.orderNumber = '';
    searchForm.mobile = '';
    searchForm.payOrderRefundstatusEnums = undefined;
    timeRange.value = null;
    quickFilter.value = 'all';
    pagination.current = 1;
    fetchData();
  }

  function onPageChange(current: number) {
    pagination.current = current;
    fetchData();
  }

  function onPageSizeChange(pageSize: number) {
    pagination.pageSize = pageSize;
    pagination.current = 1;
    fetchData();
  }

  function changePageSize(size: number) {
    pagination.pageSize = size;
    pagination.current = 1;
    fetchData();
  }
  // 生成CSV并下载
  function exportToCSV(data: RefundOrder[], filename: string) {
    // 表头
    const headers = [
      '序号',
      '订单编号',
      '退款订单编号',
      '用户手机号',
      '会员ID',
      '实退金额(元)',
      '退款金额(元)',
      '操作人员手机号',
      '订单状态',
      '是否分佣',
      '退款时间',
    ];

    // 处理数据
    const rows = data.map((item, index) => [
      (index + 1).toString(),
      item.orderNumber || '',
      item.sn || '',
      item.mobile || '',
      item.memberId || '',
      item.actualMoney?.toFixed(2) || '0',
      item.money?.toFixed(2) || '0',
      item.opMobile || '',
      getRefundOrderStatusText(item.status) || '',
      getIsDivideText(item.isDivide) || '',
      formatDateTime(item.refundDate) || '',
    ]);

    // 合并表头和数据
    const csvContent = [
      headers.join(','),
      ...rows.map((row) => row.join(',')),
    ].join('\n');

    // 创建Blob并下载
    const blob = new Blob(['\uFEFF' + csvContent], {
      type: 'text/csv;charset=utf-8;',
    });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);

    link.setAttribute('href', url);
    link.setAttribute('download', filename);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
  const loadingExportAll = ref(false);
  // 导出全部数据
  async function exportAll() {
    setLoading(true);
    loadingExportAll.value = true;
    try {
      // 获取所有数据（不分页）
      const res = await getRefundOrderList({
        pageNum: 1,
        pageSize: 9999, // 尽可能大的数量
        ...buildParams(),
      });
      // 响应拦截器已经处理响应，直接使用res.data
      const allData = res.data.records || [];
      exportToCSV(
        allData,
        `退款列表数据_全部_${dayjs().format('YYYY-MM-DD_HHmmss')}.csv`
      );
      Message.success(`已成功导出${allData.length}条记录`);
    } catch (error) {
      console.error('导出全部数据失败', error);
      Message.error('导出全部数据失败');
    } finally {
      setLoading(false);
      loadingExportAll.value = false;
    }
  }

  // 关闭退款弹窗

  // 提交退款

  // 组件生命周期
  onMounted(() => {
    // 获取URL参数

    // 如果从URL参数获取了站点或充电桩信息，更新页面标题

    fetchData();
    calculateTableHeight();
    // 监听窗口大小变化，重新计算表格高度
    window.addEventListener('resize', calculateTableHeight);
  });

  // 组件销毁前清理
  onBeforeUnmount(() => {
    // 移除事件监听
    window.removeEventListener('resize', calculateTableHeight);

    // 确保弹窗关闭
    detailVisible.value = false;

    // 清空各种引用
    renderData.value = [];
  });
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }

  .statistics-card {
    margin-bottom: 16px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    background-color: var(--color-bg-2);

    :deep(.arco-card-body) {
      padding: 16px;
    }

    .statistic-item {
      text-align: center;
      padding: 16px;
      position: relative;
      transition: all 0.2s ease;
      border-radius: 4px;

      &:hover {
        background-color: var(--color-fill-2);
      }

      &::after {
        content: '';
        position: absolute;
        top: 20%;
        right: 0;
        height: 60%;
        width: 1px;
        background-color: var(--color-border-2);
      }

      &:last-child::after {
        display: none;
      }
    }

    .statistic-title {
      color: var(--color-text-3);
      font-size: 14px;
      margin-bottom: 12px;
    }

    .statistic-value {
      color: var(--color-text-1);
      font-size: 28px;
      font-weight: 600;
      margin-bottom: 8px;
      background-image: linear-gradient(45deg, #165dff, #0fc6c2);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .statistic-desc {
      color: var(--color-text-3);
      font-size: 12px;
    }
  }

  :deep(.arco-table-th) {
    &:last-child {
      .arco-table-th-item-title {
        margin-left: 16px;
      }
    }
  }

  .general-card {
    :deep(.arco-card-header) {
      border-bottom: 1px solid var(--color-border-2);
      padding: 16px 20px;
    }
  }

  :deep(.arco-descriptions-item) {
    padding: 12px 24px;
  }

  :deep(.arco-descriptions-item-label) {
    color: rgb(78, 89, 105);
    font-weight: 400;
  }

  :deep(.arco-descriptions-item-value) {
    color: rgb(29, 33, 41);
    font-weight: 400;
  }

  .order-detail-modal {
    :deep(.arco-modal-header) {
      border-bottom: 1px solid var(--color-border-2);
      padding: 16px 20px;
    }

    .modal-title {
      display: flex;
      align-items: center;
      font-weight: 500;
      font-size: 16px;
      color: var(--color-text-1);
    }

    .order-detail-container {
      padding: 0;
      max-height: 70vh;
      overflow-y: auto;
    }

    .detail-card {
      margin-bottom: 16px;
      border-radius: 4px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

      &:last-child {
        margin-bottom: 0;
      }

      :deep(.arco-card-header) {
        padding: 12px 16px;
        background-color: var(--color-fill-2);
      }

      :deep(.arco-card-body) {
        padding: 16px;
      }
    }

    .detail-item {
      margin-bottom: 12px;
      line-height: 24px;
      display: flex;
      align-items: flex-start;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .item-label {
      font-weight: 500;
      color: var(--color-text-3);
      min-width: 80px;
      text-align: right;
      flex-shrink: 0;
    }

    .item-value {
      margin-left: 16px;
      color: var(--color-text-1);
      flex: 1;
      word-break: break-all;
    }

    .amount {
      font-weight: 500;
      color: #f5222d;
    }

    .item-desc {
      margin-left: 8px;
      color: var(--color-text-3);
      font-size: 13px;
    }
  }

  .table-toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    align-items: center;
  }

  // 调整表格行高以适应更多数据
  :deep(.arco-table-size-small) {
    .arco-table-tr {
      .arco-table-th {
        padding: 8px 12px;
      }
      .arco-table-td {
        padding: 8px 12px;
      }
    }
  }

  :deep(.arco-table-size-mini) {
    .arco-table-tr {
      .arco-table-th {
        padding: 4px 8px;
      }
      .arco-table-td {
        padding: 4px 8px;
      }
    }
  }

  // 取消斑马线样式，使用选择器设置
  :deep(.arco-table) {
    // 移除所有边框
    border: none !important;

    .arco-table-th {
      border: none !important;
      border-bottom: 1px solid var(--color-border-2) !important;
      background-color: var(--color-fill-1);
    }

    .arco-table-td {
      border: none !important;
      border-bottom: 1px solid var(--color-border-1) !important;
    }

    .arco-table-tr:last-child {
      .arco-table-td {
        border-bottom: none !important;
      }
    }

    // 提高表格行的可区分度
    .arco-table-tr:hover {
      .arco-table-td {
        background-color: var(--color-fill-2);
      }
    }

    // 奇偶行不同背景色（斑马线）- 通过变量控制
    &.arco-table-striped {
      .arco-table-tr:nth-child(even) {
        background-color: var(--color-fill-1);
      }
    }
  }

  // 优化表格分页样式
  :deep(.arco-pagination) {
    margin-top: 16px;
    justify-content: flex-end;
  }

  // 搜索区域样式优化
  .search-area {
    background-color: var(--color-bg-2);
    padding: 16px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
  }

  .search-form-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
  }

  .search-form-item {
    flex: 1;
    min-width: 220px;
    max-width: 280px;
    margin-bottom: 0;

    .search-label {
      font-size: 14px;
      color: var(--color-text-2);
      margin-bottom: 8px;
      font-weight: 500;
    }
  }

  .search-form-item-large {
    flex: 2;
    max-width: 380px;
  }

  .search-form-item-button {
    flex: 0 0 auto;
    min-width: auto;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-left: auto;
  }

  // 快速筛选区样式优化
  .quick-filter {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 4px;
    background: var(--color-fill-1);
    border-left: 4px solid var(--color-primary-light-4);

    .filter-label {
      color: var(--color-text-2);
      margin-right: 12px;
      font-weight: 500;
    }

    :deep(.arco-radio-group) {
      border: none;
      background: transparent;
    }

    :deep(.arco-radio-button) {
      border-radius: 4px;
      margin-right: 8px;
      border: 1px solid var(--color-border-2);
      transition: all 0.2s ease;

      &:not(:first-child)::before {
        display: none;
      }

      &.arco-radio-checked {
        background-color: var(--color-primary-light-1);
        border-color: var(--color-primary);
        color: var(--color-primary);
        z-index: 1;
      }
    }
  }

  // 订单详情样式
  .order-detail {
    padding: 0 16px;

    .detail-section {
      margin-bottom: 24px;

      &:last-child {
        margin-bottom: 0;
      }

      .detail-section-title {
        font-size: 15px;
        margin-bottom: 16px;
        color: var(--color-text-1);
        font-weight: 500;
        border-bottom: 1px solid var(--color-border-2);
        padding-bottom: 8px;
      }

      .detail-item {
        margin-bottom: 16px;
        line-height: 22px;

        .detail-label {
          color: var(--color-text-3);
          min-width: 80px;
          display: inline-block;
        }

        .detail-value {
          color: var(--color-text-1);
          word-break: break-word;
        }

        .price-text {
          color: var(--color-danger);
          font-weight: 500;
        }
      }
    }
  }

  .detail-footer {
    margin-top: 24px;
    display: flex;
    justify-content: center;
    padding-top: 16px;
    border-top: 1px solid var(--color-border-2);
  }

  // 设置表格无边框样式
  :deep(.arco-table-container) {
    border: none !important;

    &::before,
    &::after {
      display: none !important;
    }

    .arco-table-header {
      border: none !important;
    }

    .arco-table-body {
      border: none !important;
    }
  }

  :deep(.arco-table-border-cell) {
    .arco-table-th {
      &::before {
        display: none !important;
      }
    }

    .arco-table-td {
      &::before {
        display: none !important;
      }
    }
  }

  // 订单号和序列号宽度控制样式
  :deep(.order-number-column) {
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
  }

  /* 订单号链接样式 */
  :deep(.order-link) {
    color: var(--color-text-1);
    background-color: var(--color-fill-1);
    padding: 4px 8px;
    border-radius: 4px;
    // transition: all 0.2s ease;
    border: 1px solid transparent;
  }

  // :deep(.arco-link:hover .order-link) {
  // color: var(--color-primary);
  // background-color: var(--color-primary-light-4);
  // border-color: var(--color-primary-light-3);
  // }

  :deep(.serial-number-column) {
    max-width: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 鼠标悬停显示完整内容 */
  // :deep(.order-number-column:hover) {
  //   overflow: visible;
  //   z-index: 10;
  //   position: relative;
  //   border-radius: 2px;
  //   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  // }

  /* 普通订单号显示样式 */
  :deep(.order-number-display) {
    color: var(--color-text-2);
    background-color: var(--color-fill-1);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
  }

  /* 操作列样式优化 */
  :deep(.operation-button-group) {
    display: flex;
    justify-content: center;
  }

  :deep(.arco-btn-shape-circle) {
    &.arco-btn-size-mini {
      width: 24px;
      height: 24px;
      font-size: 14px;

      .arco-icon {
        font-size: 14px;
      }
    }

    &:hover {
      background-color: var(--color-fill-3);
    }

    &.arco-btn-status-danger:hover {
      color: #fff;
      background-color: var(--color-danger-light-2);
    }
  }

  /* 表格操作按钮悬停样式 */
  .table-operation-column {
    .arco-btn {
      transition: all 0.2s ease;
      opacity: 0.9;

      &:hover {
        transform: scale(1.1);
        opacity: 1;
      }
    }
  }

  .refund-form-container {
    padding: 0 20px;

    .refund-info {
      background-color: var(--color-fill-2);
      border-radius: 4px;
      padding: 16px;
      margin-bottom: 20px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      border: 1px solid var(--color-border-2);

      .info-item {
        display: flex;
        align-items: center;
        line-height: 24px;
        margin-bottom: 8px;

        &:last-child {
          margin-bottom: 0;
        }

        .info-label {
          color: var(--color-text-3);
          width: 80px;
          flex-shrink: 0;
          font-weight: 500;
        }

        .info-value {
          color: var(--color-text-1);
          flex: 1;

          &.price {
            color: var(--color-danger);
            font-weight: 600;
            font-size: 16px;
          }
        }
      }
    }

    .refund-form {
      :deep(.arco-form-item) {
        margin-bottom: 24px;

        &:last-child {
          margin-bottom: 0;
        }

        .arco-form-item-label {
          font-weight: 500;
          color: var(--color-text-2);
        }

        .arco-form-item-content {
          .arco-input-number {
            width: 100%;
            .arco-input-inner-wrapper {
              background-color: var(--color-fill-2);
              transition: all 0.2s ease;

              &:hover,
              &:focus {
                background-color: var(--color-bg-2);
                border-color: var(--color-primary-light-2);
              }
            }
          }

          .arco-textarea {
            background-color: var(--color-fill-2);
            transition: all 0.2s ease;
            resize: none;

            &:hover,
            &:focus {
              background-color: var(--color-bg-2);
              border-color: var(--color-primary-light-2);
            }
          }
        }
      }
    }
  }
</style>
